<template>
    <view class="comp_count">
		<view class="comp_top">
			<view class="comp_title">
				<view class="iconsj icons icon-shijianjiangxu"></view>
				<view>我的进行中</view>
			</view>
			<view class="icons icon-gengduo" v-if="datalist.statu==='2'" @click="todetail"></view>
		</view>
		<view class="comp_body">
			<template v-if="datalist.statu==='1'">
				<view class="comp_content_no"><view>暂无</view></view>
			</template>
			<template v-else-if="datalist.statu==='2'">
				<view class="comp_content">
					<view class="comp_content_l">
						<image class="ewm" :src="datalist.ewm"></image>
						<view class="ewm_txt">(打卡码)</view>
					</view>
					<view class="comp_content_r">
						<view class="comp_content_r_txt text-o-sl"><text class="fc_green">当前比赛：</text>{{datalist.title}}</view>
						<view class="comp_content_r_txt comp_content_txt_t">
							<view><text class="fc_green">时间：</text>{{datalist.time}}</view>
							<view class="comp_content_sta" :class="datalist.clock_sta==='2'?'sign_no':'sign_on'">{{datalist.clock_sta==='2'?'未签到':'已签到'}}</view>
							</view>
						<view class="comp_content_r_txt"><text class="fc_green">我的队伍：</text>{{datalist.teamname}}</view>
						<view class="comp_content_r_txt"><text class="fc_green">打卡点：</text>{{datalist.clock_num}}个<text class="fc_green magin_l">已完成：</text>{{datalist.clock_on_num}}个</view>
					</view>
				</view>
			</template>
		</view>
        
    </view>
</template>

<script>
    export default {
        name: "count_info",
        props: {
            datalist: {
                type: Object,
                default(){
                    return []
                }
            }
        },
        data() {
            return {	
            }
        },
        methods: {
            //跳转详细页
            todetail() {
                this.$emit('onclick')
            }
        }
    }
</script>

<style lang="scss" scoped>
	.sign_no{
		background-color: #eee;
		color: #333;
	}
	.sign_on{
		background-color: #02BB6F;
		color: #fff;
	}
	.fc_green{
		font-size: 26rpx;
		color: #02BB6F;
	}
	.magin_l{
		margin-left: 25rpx;
	}
    .color-red{
        color: red!important;
    }
    .font-small{
        font-size: 24rpx!important;
    }
    .comp_count{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 30rpx;
		.comp_body{
			display: flex;
			flex: 1;
			.comp_content_no{
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				font-size: 24rpx;
				font-weight: bold;
				color: #999999;
			}
			.comp_content{
				display: flex;
				flex: 1;
				width: 100%;
				.comp_content_l{
					display: flex;
					flex-direction: column;
					width: 164rpx;
					margin-right: 35rpx;
					.ewm{
						width: 164rpx;
						height:164rpx;
						margin-bottom: 10rpx;
					}
					.ewm_txt{
						font-size: 24rpx;
						text-align: center;
						font-weight: 500;
						color: #999999;
					}
				}
				.comp_content_r{
					display: flex;
					flex-direction: column;
					width: calc(100% - 194rpx);
					flex: 1;
					.comp_content_r_txt{
						font-size: 26rpx;
						color: #333;
						margin-bottom: 20rpx;
						.comp_content_sta{
							border-radius: 15rpx;
							height:30rpx;
							font-size: 18rpx;
							padding: 0 10rpx;
						}
					}
					.comp_content_txt_t{
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex:1;
					}
					.text-o-sl{
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 100%;
					}
				}
			}
		}
		.comp_top{
			display: flex;
			justify-content: space-between;
			padding-bottom: 15rpx;
			margin-bottom: 15rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.comp_title{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				.iconsj{
					margin-right: 12rpx;
				}
			}
		}
        
        
        
    }

</style>
